
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Logvan</title>
<link rel="shortcut icon" href="/escolares/html/images/icon/van.png">
<link href="/escolares/html/css/bootstrap.css" rel="stylesheet"
	type="text/css">
<link href="/escolares/html/css/DT_bootstrap.css" rel="stylesheet"
	type="text/css">
<style type="text/css">
.dataTables_length {
	display: none;
}

.dataTables_filter {
	display: none;
}

.dataTables_info {
	display: none;
}

.dataTables_paginate {
	display: none;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/escolares/html/js/bootstrap.js"></script>
<script src="/escolares/html/js/jquery.dataTables.js"></script>
<script src="/escolares/html/js/DT_bootstrap.js"></script>
<script src="/escolares/html/js/bootstrap-datetimepicker.min.js"></script>
<script src="/escolares/html/js/jquery.Rut.min.js"></script>
<script src="/escolares/html/js/jquery.number.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
	$(function() {
		$('#datetimepicker4').datetimepicker({
			
			format:"dd/MM/yyyy",
			defaultDate: "01/01/2000",
			pickTime : false
		});
		
	});
			$('#tRutApoderado').Rut({
				on_error : function() {
					alert('Rut incorrecto');
				},
				format_on : 'change'
			});
			$('#bGuardar').click(function() {

					if ($("#tRutApoderado").val() == "") {
						alert("Debe Ingresar el Rut del apoderado");
						$('#tRutApoderado').focus();
						return false;
					}

					if ($("#tNombresApoderado").val() == "") {
						alert("Debe Ingresar el Nombre del apoderado");
						$('#tNombresApoderado').focus();
						return false;
					}

					if ($("#tApellidosApoderado").val() == "") {
						alert("Debe Ingresar los Apellidos del apoderado");
						$('#tApellidosApoderado').focus();
						return false;
					}
					if ($("#tDireccionApoderado").val() == "") {
						alert("Debe Ingresar la Dirección del apoderado");
						$('#tDireccionApoderado').focus();
						return false;
					}

					if ($("#tEmail").val().indexOf('@',
							0) == -1
							|| $("#tEmail").val()
									.indexOf('.', 0) == -1) {
						alert('El correo electrónico introducido no es correcto.');
						$("#tEmail").focus();
						return false;
					}
					if ($("#tTelefonoApoderado").val() == "") {
						alert("Debe Ingresar la Telefono del apoderado");
						$('#tTelefonoApoderado').focus();
						return false;
					}
					if ($("#tContratoId").val() == "") {
						alert("Debe Ingresar el Numero de contrato del apoderado");
						$('#tContratoId').focus();
						return false;
					}
					if ($("#sDiasPago").val() == -1) {
						alert("Debe Seleccionar dia de Pago");
						$('#sDiasPago').focus();
						return false;
					}

			});
});
</script>
<script type="text/javascript">

	$(document).ready(function() {
		$('#divAlumno').hide();
		enlazarCombos($("#sColegios"),$("#sCursos"),"/escolares/jsonColegioCurso");
		$('#newAlumno').click(function() {
			$('#divAlumno').toggle("swing");
		});
		
		$('#tAnualidad').number(true, 0,',', '.');
		$('#tMontoMensual').number(true, 0,',', '.');
		$('#tCantidadPagos').number(true, 0,',', '.');
		$('#sFurgones').bind("change",{},function(){
			var furgonId=$(this).val();
			if(furgonId>0){
				var data={furgonId:furgonId};
				$.getJSON("/escolares/jsonCupoFurgon",data,
			            function(response, textStatus, jqXHR) {
						$('#tCupos').attr("value",response[0].cupo);
				        }
			        );
			}else
				$('#tCupos').attr("value","");
    		
			
		});
		$('#tRut').Rut({
			format_on : 'change',
			on_error : function() {
				alert('Rut incorrecto');
			}
		});
		
		$('#tMontoMensual').blur(function() {
					if ($('#tMontoMensual').val().length > 0 && $('#sCantidadPagos').val() >-1)
						$('#tAnualidad').val(parseFloat($('#tMontoMensual').val())* parseFloat($('#sCantidadPagos').val()));
					else
						$('#tAnualidad').val("");
	
				});
		$('#sCantidadPagos').change(function() {
					if ($('#tMontoMensual').val().length > 0 && $('#sCantidadPagos').val() >-1)
						$('#tAnualidad').val(parseFloat($('#tMontoMensual').val())* parseFloat($('#sCantidadPagos').val()));
					else
						$('#tAnualidad').val("");
		});
			
		$('#bSave').click(function() {
			if ($("#tRut").val() == "") {
				alert("Debe Ingresar el Rut del Alumno");
				$('#tRut').focus();
				return false;
			}
			if ($("#tNombres").val() == "") {
				alert("Debe Ingresar el Nombre del Alumno");
				$('#tNombres').focus();
				return false;
			}
			if ($("#tApellidos").val() == "") {
				alert("Debe Ingresar los Apellidos del Alumno");
				$('#tApellidos').focus();
				return false;
			}
			if ($("#tFechaNacimiento").val() == "") {
				alert("Debe Ingresar la Fecha de Nacimiento del Alumno");
				$('#tFechaNacimiento').focus();
				return false;
			}
			if ($("#tDireccion").val() == "") {
				alert("Debe Ingresar la Dirección del Alumno");
				$('#tDireccion').focus();
				return false;
			}
			if ($("#tDireccionEmergencia").val() == "") {
				alert("Debe Ingresar la Dirección de Emergencia del Alumno ");
				$('#tDireccionEmergencia').focus();
				return false;
			}
// 			if ($("#tTelefono").val() == "") {
// 				alert("Debe Ingresar el Telefono del Alumno");
// 				$('#tTelefono').focus();
// 				return false;
// 			}
			if ($("#tMontoMensual").val() == "" || $("#tMontoMensual").val()== 0 ){
				alert("Debe Ingresar el Valor Mensual del Costo del Servicio ");
				$('#tMontoMensual').focus();
				return false;
			}
			if ($("#sCantidadPagos").val()== -1 ){
				alert("Debe Seleccionar la cantidad de pagos del Servicio ");
				$('#sCantidadPagos').focus();
				return false;
			}
			if ($("#tAnulaidad").val() == "" || $("#tAnulaidad").val()== 0 ){
				alert("Debe Ingresar el Valor Anual del Costo del Servicio ");
				$('#tAnulaidad').focus();
				return false;
			}
			if ($("#sFurgones").val() == -1) {
				alert("Debe Seleccionar un Furgon");
				$('#sFurgones').focus();
				return false;
			}
// 			if ($("#tCupos").val()== 0 ){
// 				alert("No hay Cupos Disponibles para este Furgon");
// 				$('#sFurgones').focus();
// 				return false;
// 			}
			if ($("#sColegios").val() == -1) {
				alert("Debe Seleccionar un Colegio");
				$('#sColegios').focus();
				return false;
			}
			if ($("#sCursos").val() == -1) {
				alert("Debe Seleccionar un Curso");
				$('#sCursos').focus();
				return false;
			}
		});
	});
	function enlazarCombos(comboSource,comboDest,urlLoad){
		comboSource.bind("change",{},function(){
			var parentId=$(this).val();
			var data={parentId:parentId};
			comboDest.html("");
			comboDest.append("<option value=\"0\">Seleccione Curso</option>");
			$.getJSON(urlLoad,data,
		            function(response, textStatus, jqXHR) {
		        		var childs = [];
			        	for(indice=0;indice<response.length;indice++){
			        		var child=response[indice];
			        		var $option=$("<option>"+child.label+"</option>");
			        		$option.attr("value",child.value); 
			        		comboDest.append($option);
						}	        		
		            }
		        );
		});
	}
</script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="container">
		<!-- Main component for a primary marketing message or call to action -->
		<%@include file="../../_common/nav-var.jsp"%>
		<div class="well">
			<s:if test="okMessage=='Operacion realizada exitosamente.'">
				<div class="alert alert-success">
					<s:property value="okMessage" />
				</div>
			</s:if>
			<s:if test="errorMessage=='Se ha producido un error inesperado.'">
				<div class="alert alert-error">
					<s:property value="errorMessage" />
				</div>
			</s:if>
			<s:form id="formApoderado" styleId="formApoderado"
				action="saveApoderado" cssClass="form-inline" role="form"
				method="post" theme="simple" namespace="">
				<s:hidden name="existOrNew" value="1"></s:hidden>
				<div class="control-group">
					<h4 style="color: #5BB75B">Datos Del Apoderado</h4>
					<hr class="bs-docs-separator">
					<div class="controls">
						<s:hidden name="apoderado.apoderadoId" styleId="apoderadoId"
							value="%{apoderado.apoderadoId}"></s:hidden>
						<s:hidden name="apoderado.usuarioId" styleId="usuarioId"
							value="%{apoderado.usuarioId}"></s:hidden>
						<s:textfield cssClass="span3" id="tRutApoderado"
							placeholder="Ingrese Rut" name="apoderado.rut"
							value="%{apoderado.rut}"></s:textfield>
						<s:textfield cssClass="span3" id="tNombresApoderado"
							placeholder="Ingrese Nombre" name="apoderado.nombres"
							value="%{apoderado.nombres}"></s:textfield>
						<s:textfield cssClass="span3" id="tApellidosApoderado"
							placeholder="Ingrese Apellidos" name="apoderado.apellidos"
							value="%{apoderado.apellidos}"></s:textfield>
					</div>

					<div class="controls">
						<s:textfield cssClass="span3" id="tDireccionApoderado"
							placeholder="Ingrese Direccion" name="apoderado.direccion"
							value="%{apoderado.direccion}"></s:textfield>
						<s:textfield cssClass="span3" id="tEmail"
							placeholder="Ingrese Email" name="apoderado.email"
							value="%{apoderado.email}"></s:textfield>
						<s:textfield cssClass="span3" id="tTelefonoApoderado"
							placeholder="Ingrese Telefono" name="apoderado.telefono"
							value="%{apoderado.telefono}"></s:textfield>

					</div>
					<div class="controls">
						<s:textfield cssClass="span2" id="tContratoId"
							placeholder="Id Contrato" name="apoderado.contratoId"
							value="%{apoderado.contratoId}"></s:textfield>
						<s:select id="sDiasPago" headerValue="Seleccione dia de pago"
							headerKey="-1" cssClass="span3" name="apoderado.diaPago"
							value="%{apoderado.diaPago}" list="diasPago">
						</s:select>

					</div>
					<br>
					<s:submit id="bGuardar" action="saveApoderado" key="label.save"
						onclick="" cssClass="btn btn-lg btn-primary" cssStyle="margin-left:20px;" />
				</div>
			</s:form>
			<a class="btn btn-info " id="newAlumno">Agregar Alumno</a> <br>
			<br>

			<div id="divAlumno" class="well">
			<h4 style="color: #5BB75B" class="text-center" >Nuevo Alumno</h4>
				<s:form id="formAlumno" cssClass="form-inline" role="form"
					action="saveAlumno" method="post" theme="simple" namespace="">
					<s:hidden name="existOrNew" value="0"></s:hidden>
					<s:hidden name="alumno.apoderadoId"
						value="%{apoderado.apoderadoId}"></s:hidden>
					<s:hidden name="alumno.usuarioId" value="%{usuario.usuarioId}"></s:hidden>
					<div class="control-group" style="margin-left: 50px">
						<div class="controls">
							<s:textfield cssClass="span3" id="tRut" placeholder="Rut"
								name="alumno.rut"></s:textfield>
							<s:textfield cssClass="span3" id="tNombres" placeholder="Nombre"
								name="alumno.nombres"></s:textfield>
							<s:textfield cssClass="span3" id="tApellidos"
								placeholder="Apellidos" name="alumno.apellidos"></s:textfield>
						</div>

						<div class="controls">
							<div id="datetimepicker4" class="input-append ">
								<s:textfield type="text"
									id="tFechaNacimiento" name="fechaNacimiento"
									placeholder="Fecha de Nacimiento"></s:textfield>
								<span class="add-on"> <i data-time-icon="icon-time"
									data-date-icon="icon-calendar"> </i>
								</span>
							</div>
						</div>
						<div class="controls">
							<s:textfield cssClass="span3" id="tDireccion"
								placeholder="Direccion" name="alumno.direccion"></s:textfield>
							<s:textfield cssClass="span3" id="tDireccionEmergencia"
								placeholder="Direccion Emergencia"
								name="alumno.direccionEmergencia"></s:textfield>
							<s:textfield cssClass="span3" id="tTelefono"
								placeholder="Telefono" name="alumno.telefono"></s:textfield>
						</div>
						<div class="controls">

							<s:textfield cssClass="span3" id="tAlergias"
								placeholder="Alergias" name="alumno.alergias"></s:textfield>
							<s:textfield cssClass="span3" id="tObservacion"
								placeholder="Observaciones" name="alumno.observacion"></s:textfield>
							<s:textfield cssClass="span3" id="tSistemaSalud"
								placeholder="Ingrese Sistema de Salud"
								name="alumno.sistemaSalud" value="%{alumno.sistemaSalud}"></s:textfield>
						</div>
						<div class="controls">
							<div class="input-group">
								<span class="input-group-addon">$</span>
								<s:textfield cssClass="span3 form-control" id="tMontoMensual"
									name="montoMensual" placeholder="Monto Mensual"></s:textfield>
									
								<s:select id="sCantidadPagos" headerValue="Cantidad de pagos"
									headerKey="-1" cssClass="span3" name="cantidadPago"
									 list="cantidadPagos">
								</s:select>
								<span class="input-group-addon">$</span>
								<s:textfield cssClass="span3" id="tAnualidad" readonly="true"
									class="form-control" placeholder="Anualidad"
									name="alumno.anualidad"></s:textfield>
							</div>
						</div>
						<div class="controls">
							<s:select list="furgones" id="sFurgones" cssClass="span3"
								headerKey="-1" headerValue="Seleccione Furgon"
								listValue="patente" listKey="furgonId" name="alumno.furgonId"></s:select>

							<s:select list="colegios" id="sColegios" styleId="sColegios"
								cssClass="span3" headerKey="-1" headerValue="Seleccione Colegio"
								listValue="nombre" listKey="colegioId"></s:select>

							<s:select list="cursos" id="sCursos" styleId="sCursos"
								cssClass="span3" headerKey="-1" headerValue="Seleccione Curso"
								listValue="nombre" listKey="cursoId" name="alumno.cursoId"></s:select>
						</div>
						<div id="controls">
							<s:textfield cssClass="span3" id="tCupos" key="Cupos Disponibles"
								readonly="true" placeholder="Cupos Disponibles" value=""></s:textfield>
						</div>
						<div class="controls">
							<s:submit action="saveAlumno" id="bSave" key="label.new"
								cssStyle="margin-left:80px;margin-top:30px;"
								cssClass="btn btn-lg btn-primary" />
						</div>
					</div>

				</s:form>

			</div>

<!-- 			<div class="row"> -->
<!-- 				<p class="text-right"> -->
<!-- 					Pagos Realizados -->
<%-- 					<s:property value="pagosRealizados" /> --%>
<!-- 				</p> -->
<!-- 				<p class="text-right"> -->
<!-- 					Pagos Pendientes -->
<%-- 					<s:property value="pagosPendientes" /> --%>
<!-- 				</p> -->
<!-- 			</div> -->
			<div class="row">
				<p class="text-right">
					<a
						href="<s:url action="apoderados.action">
								<s:param name="usuarioId" value="usuario.usuarioId" />
							  </s:url>"
						class="btn btn-link">Atras..</a>
				</p>
			</div>
			<h4 style="color: #5BB75B;">Listado De Alumnos</h4>
			<hr class="bs-docs-separator">
			<table		class="table table-striped table-bordered" id="example">
				<thead>
					<tr>
						<th>Furgon</th>
						<th>Nombres</th>
						<th>Apellidos</th>
						<th>Direccion</th>
						<th>P/R</th>
						<th>P/P</th>
						<th>Acciones</th>
					</tr>
				</thead>
				<tbody>
					<s:iterator value="alumnos" var="alumno">
						<tr>
							<td><s:iterator status="furgonesMap" value="furgonesMap">
									<s:if test="#alumno.furgonId == key">
										<s:property value="value"></s:property>
									</s:if>
								</s:iterator></td>
							<td><s:property value="nombres" /></td>
							<td><s:property value="apellidos" /></td>
							<td><s:property value="direccion" /></td>

							<td><s:iterator status="pagosRealizadosMap"
									value="pagosRealizadosMap">
									<s:if test="#alumno.alumnoId == key">
										<s:property value="value" />
									</s:if>
								</s:iterator></td>

							<td><s:iterator status="pagosPendientesMap"
									value="pagosPendientesMap">
									<s:if test="#alumno.alumnoId == key">
										<s:property value="value" />
									</s:if>
								</s:iterator></td>

							<td><s:url id="deleteUrl" action="deleteAlumno">
									<s:param name="alumnoId" value="%{#alumno.alumnoId}" />
									<s:param name="usuarioId" value="usuario.usuarioId" />
								</s:url> <s:url id="editUrl" action="editAlumno">
									<s:param name="alumnoId" value="%{#alumno.alumnoId}" />
									<s:param name="usuarioId" value="usuario.usuarioId" />
								</s:url> <s:form id="%{#alumno.alumnoId}" cssStyle="margin: 0 0 0 0"
									role="form" method="post" theme="simple" namespace="/">
									<s:a href="%{editUrl}" cssClass="btn btn-info"
										onclick="return true;">Modificar</s:a>
									<s:a href="%{deleteUrl}" cssClass="btn btn-danger"
										onclick="return confirm('¿Realmente Desea Eliminar el Alumno?')">Eliminar</s:a>
								</s:form></td>
						</tr>
					</s:iterator>
				</tbody>
			</table>
			<div class="row">
				<p class="text-right">
					<a
						href="<s:url action="apoderados.action">
								<s:param name="usuarioId" value="usuario.usuarioId" />
							  </s:url>"
						class="btn btn-link">Atras..</a>
				</p>
			</div>
		</div>
	</div>
</body>
</html>

